
(function(){
    // http://chst.vip:1234/api/getcouponproduct
    // 获取详情页面地址
    let url = location.href
    console.log(url);
    let urlObj = getQueryString(url)
    console.log(urlObj);
    console.log(urlObj.couponid);

    //
    let picarr = []
    let info = document.querySelector('#product .info')
    console.log(info);
    const xhr1 = new XMLHttpRequest();
    xhr1.open('get','http://chst.vip:1234/api/getcouponproduct?couponid=' + urlObj.couponid,false)
    xhr1.onload = function(){
        if (xhr1.status === 200) {
            let res1 = JSON.parse(xhr1.responseText)
            console.log(res1.result);
            let lis = ''
            let regExp = /^<[^<]+\s+src="([^''""]*)"/;
            res1.result.forEach((item,index) => {
                let url = res1.result[index].couponProductImg.match(regExp)[1];
                picarr.push(url);  
                lis += 
                        `
                        <li class="${index}">
                            <a href="javascript:;">
                                <div class="left">
                                    <img src="${url}" alt="" class="tu">
                                </div>
                                <div class="right">
                                    <h4>
                                        ${item.couponProductName}
                                    </h4>
                                    <p>${item.couponProductPrice}</p>
                                    <div class="other">
                                        <div class="mall">
                                            ${item.couponProductTime}
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        `
            });
            info.innerHTML = lis;
        }
    }
    xhr1.send(null);

    // 返回顶部
    $('.container a').eq(2).click(function(){
        $('html,body').animate({scrollTop:0},1000)
    })

    let m;
    let imgs = document.querySelectorAll('.tu')
    console.log(imgs);

    $('.carousel').stop().hide();

    $('.info li').click(function(){
        console.log(11111);
        $('.carousel').stop().slideDown();
        m = $(this).index();
        console.log(m);

        let pian = document.querySelector('.infor li');
        let imgs = document.querySelectorAll('.tu');
        let hua = document.querySelector('.hua');
        console.log($('.tu').eq(m)[0]);

        // 获取点击的图片地址 给当前
        $('.hua').attr('src',picarr[m])

        //点击X号关闭
        $('.del').click(function(){
            $('.carousel').stop().slideUp();
        })

        // 右击下一页
        $('.next').click(function(){
            m++;
            if (m>picarr.length-1) {
                m=0;
            }
            $('.hua').attr('src',picarr[m])
        })

        // 左击上一页
        $('.prev').click(function(){
            m--;
            if (m<0) {
                m=picarr.length-1;
            }
            $('.hua').attr('src',picarr[m])
        })
    })

    // // 发送请求获取数据 带上从首页获取过来的 urlObj.productId参数
    // fetch('http://chst.vip:1234/api/getcouponproduct?couponid=' + urlObj.couponid)
    // .then(response => {
    //     return response.json()
    // }).then(data => {
    //     let res = data.result;
    //     console.log(res);
    //     let ele = ''
    //     res.forEach((item,i) => {
    //         ele += `
    //         <li data-index="${i}">
    //             <a href="javascript:;">
    //                 <div class="left">
    //                     ${item.couponProductImg}
    //                 </div>
    //                 <div class="right">
    //                     <h4>
    //                     ${item.couponProductName}
    //                     </h4>
    //                     <p>${item.couponProductPrice}</p>
    //                     <div class="other">
    //                         <div class="mall">
    //                             ${item.couponProductTime}
    //                         </div>
    //                     </div>
    //                 </div>
    //             </a>
    //         </li>
    //         `
    //     });
    //     $('.info').html(ele)

    //     // 轮播图
    //     let i
    //     $('.info').on('click','li',function(){
    //         // 点击 li 下拉显示 轮播图大盒子
    //         $('.carousel').css('top',0)

    //         // 点击 X 上拉轮播图盒子
    //         $('.marsk i').on('click',function(){
    //             $('.carousel').css('top',-1000)
    //         })

    //         let ele = ''
    //         res.forEach(item => {
    //             ele += `
    //                 <li> ${item.couponProductImg} </li>
    //             `
    //         });
    //         $('.infor').html(ele);

    //         let index = $(this).attr('data-index')
    //         $('.infor').css('left',-200 * index)
    //         console.log(index); 

    //         i = -index * 200
    //         console.log($('.infor').css('left'));
    //     })

    //     // 给 next 添加点击事件
    //     $('.next').on('click',function(){
    //         if (parseInt($('.infor').css('left')) < -(res.length - 2) * 200) {
    //             return alert('已经是最后一页啦！')
    //         }
    //         i -= 200
    //         console.log(parseInt($('.infor').css('left')));

    //         $('.infor').css('left',i)
    //     })

    //     // 给 prev 添加点击事件
    //     $('.prev').on('click',function(){
    //         if (parseInt($('.infor').css('left')) > -200) {
    //             return alert('已经是第一页啦！')
    //         }
    //         i += 200
    //         console.log(parseInt($('.infor').css('left')));

    //         $('.infor').css('left',i)
    //     })



    // })


    
})();